<template>
	<div class="bg">
		<div class="container" v-loading="loading">
			<!--      拖拽区域-->
			<div class="drag"></div>
			<div class="left">
				<!--        左边打字机效果-->
				<div class="title" v-html="text"></div>
				<div class="desc">关于<span class="about" @click="aboutDongYueChat">冬月CHat</span></div>
			</div>
			<div class="right">
				<!--        登录-->
				<template v-if="isLogin">
					<input type="text" placeholder="请输入您的手机号" class="inputs user" v-model="userInfo.phone" />
					<input
						type="password"
						placeholder="请输入您的密码"
						class="inputs pwd"
						v-model="userInfo.password"
						@keydown.enter="handleLogin"
					/>
					<div class="tips">
						还没有账号？
						<span class="register" @click="handleGoRegister">去注册</span>
					</div>
					<button class="login-btn" @click="handleLogin">登录</button>
				</template>
				<!--        注册-->
				<template v-else>
					<input
						type="text"
						placeholder="请输入您的手机号"
						class="inputs user"
						v-model="registerInfo.phone"
					/>
					<input
						type="password"
						placeholder="请输入您的密码"
						class="inputs pwd"
						v-model="registerInfo.password"
					/>
					<input type="text" placeholder="请输入您的昵称" class="inputs nick" v-model="registerInfo.nick" />
					<div class="tips">
						已经有账号？
						<span class="register" @click="handleGoLogin">去登录</span>
					</div>
					<button class="login-btn" @click="handleRegister">注册</button>
				</template>
			</div>
		</div>
		<windows-btn></windows-btn>
	</div>
</template>
<script setup lang="ts">
import { IRegisterRes, IUserInfoData } from '@/api/login_register/type'
import utils from '@/utils'
import { reqLogin, reqRegister } from '@/api/login_register'
import { useUserInfoStore } from '@/store/modules/user'

// userStore
const userInfoStore = useUserInfoStore()
//router
const router = useRouter()
// 加载动画
const loading = ref(false)
// 打字机文字
const text = ref<string>('')
// 是登录还注册
const isLogin = ref(true)
// 登录信息
const userInfo = ref<IUserInfoData>({
	phone: '',
	password: ''
})
// 注册信息
const registerInfo = ref<IUserInfoData>({
	phone: '',
	password: '',
	nick: ''
})

// 登录
const handleLogin = async () => {
	const { phone, password } = userInfo.value
	if (utils.checkPhone(phone)) {
		if (!password) {
			utils.msg('请输入密码！', 'error')
		}
	} else {
		utils.msg('请输入正确的手机号！', 'error')
	}
	loading.value = true
	const res = await reqLogin(userInfo.value)
	if (res && res.code === 200) {
		loading.value = false
		utils.msg('登录成功！', 'success')
		// 存储在本地
		utils.setCache('userInfo', res.data)
		// 存pinia
		userInfoStore.login(res.data)
		router.push('/message')
	}
}
// 去登录
const handleGoLogin = () => {
	text.value = ''
	print('WELCOME TO\nILOVEFCHAT')

	isLogin.value = true
	registerInfo.value.phone = ''
	registerInfo.value.password = ''
	registerInfo.value.nick = ''
}

// 注册
const handleRegister = async () => {
	const { phone, password, nick } = registerInfo.value
	if (utils.checkPhone(phone)) {
		if (!password) {
			utils.msg('请输入密码！', 'error')
			return
		}
		if (!nick) {
			utils.msg('请输入昵称！', 'error')
			return
		}
		if (nick.length > 15) {
			utils.msg('昵称不能超过15个字符！', 'error')
		}
	} else {
		utils.msg('请输入正确的手机号！', 'error')
	}
	console.log('通过')
	// 加载动画
	loading.value = true
	const res: IRegisterRes = await reqRegister(registerInfo.value)
	console.log(res)
	if (res && res.code === 200) {
		utils.msg('注册成功！', 'success')
		// 存储在本地
		utils.setCache('userInfo', res.data)
		// 存pinia
		userInfoStore.login(res.data)
		router.push('/message')
	} else {
		utils.msg(res.msg, 'error')
	}
	loading.value = false
}

// 去注册
const handleGoRegister = () => {
	text.value = ''
	print('WELCOME TO\nILOVEFCHAT')

	isLogin.value = false
	userInfo.value.phone = ''
	userInfo.value.password = ''
}

// 打印机效果
const print = async (printText: string) => {
	for (let i = 0; i < printText.length; i++) {
		let str = printText.slice(i, i + 1)
		if (str === '\n') {
			text.value += '<br>'
		} else {
			await new Promise((resolve) => {
				setTimeout(() => {
					text.value += str
					resolve(null)
				}, 80)
			})
		}
	}
	console.log(8)
	text.value = text.value
}
onMounted(() => {
	print('WELCOME TO\nILOVEFCHAT')
})
</script>

<style scoped>
@font-face {
	font-family: 'Regular';
	font-weight: 400;
	src:
		url('../../assets/iconfont/login_register.woff2') format('woff2'),
		url('../../assets/iconfont/login_register.woff') format('woff');
	font-display: swap;
}
.bg {
	width: 100vw;
	height: 100vh;
	background-color: var(--login-bg-color);
	display: flex;
	justify-content: center;
	align-items: center;

	.container {
		display: flex;
		width: 1000px;
		height: 600px;

		.drag {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 30px;
			user-select: none;
			-webkit-app-region: drag;
		}

		.left {
			width: 100%;
			height: 100%;
			flex: 16;
			position: relative;
			display: flex;
			flex-direction: column;
			padding: 20% 0;
			box-sizing: border-box;
			&::before {
				content: '';
				position: absolute;
				top: 40%;
				left: 30%;
				width: 280px;
				height: 100px;
				background: linear-gradient(to right, var(--primary-color), #c471ed, #f64f59);
				filter: blur(70px);
				transition: all 0.5s;
			}
			.title {
				width: 100%;
				height: 120px;
				line-height: 60px;
				font-size: 40px;
				font-weight: bold;
				font-family: Regular;
				padding-left: 25%;
				box-sizing: border-box;
				color: var(--login-text-color);
				z-index: 2;
			}
			.desc {
				font-size: 15px;
				font-weight: bold;
				padding-left: 45%;
				margin-top: 10px;
				color: var(--login-about-color);
				cursor: pointer;
				z-index: 2;

				.about {
					color: #5140f0;
					text-decoration: underline;
				}
			}
		}
		.right {
			flex: 18;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.inputs {
				border-radius: 15px;
				display: block;
				width: 290px;
				height: 55px;
				border: none;
				background-color: var(--login-input-bg-color);
				color: var(--login-input-text-color);
				padding: 20px;
				box-sizing: border-box;

				&::placeholder {
					color: var(--login-input-text-color);
				}
			}
			.pwd {
				margin-top: 30px;
			}
			.nick {
				margin-top: 30px;
			}
			.tips {
				width: 290px;
				text-align: right;
				margin: 10px 0;
				color: var(--login-tips-color);
				font-size: 13px;
				.register {
					color: rgb(68, 96, 241);
					cursor: pointer;
				}
			}
			.login-btn {
				width: 290px;
				height: 50px;
				border: none;
				border-radius: 10px;
				font-size: 15px;
				background-color: var(--primary-color);
				color: var(--login-button-text-color);
				cursor: pointer;
				box-shadow: var(--primary-color) 0 20px 30px -10px;
				transition: box-shadow 0.3s;

				&:hover {
					box-shadow: var(--primary-color) 0 10px 30px -10px;
				}
			}
		}
	}
}
</style>
